<template>
  <div class="manage_detail">
    <div class="top_treadcrumb">
      <span class="lander_detail_back" title="返回"
        ><svg class="icon" aria-hidden="true" @click="back">
          <use xlink:href="#icon-fanhuihong1"></use></svg
      ></span>
      <span v-if="this.actionType !== 'create'">ID {{id}} : {{form.userName}}</span>
      <span v-if="this.actionType === 'create'">推广员创建</span>
      <span v-else-if="this.actionType === 'edit'">编辑</span>
      <span v-else>查看</span>
    </div>
    <div class="manage_detail_content">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="112px"
        class="demo-form"
      >
        <div class="form_box">
          <div class="box_title">基本信息</div>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            :label="RoleName + '名称'"
            prop="userName"
          >
            <span v-if="actionType === 'detail'">{{ form.userName }}</span>
            <el-input
              v-else
              :placeholder="'请填写' + RoleName + '名称'"
              style="width: 240px;"
              v-model="form.userName"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="RoleName === '推广商'"
            :class="isDetail ? 'detail_item' : ''"
            label="允许继续推广"
            prop="allowAssistant"
          >
            <span v-if="actionType === 'detail'">{{
              form.allowAssistant ? "是" : "否"
            }}</span>
            <el-radio-group v-else v-model="form.allowAssistant">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="类型"
            prop="assistantType"
          >
            <span v-if="actionType === 'detail'">{{ form.assistantType }}</span>
            <el-select
              v-else
              v-model="form.assistantType"
              style="width: 240px;"
              :placeholder="'请选择' + RoleName + '类型'"
            >
              <el-option
                v-for="item in proTypeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :class="actionType === 'detail'"
            label="商务人员"
            prop="businessMember"
          >
            <span v-if="actionType === 'detail'">{{
              form.businessMember
            }}</span>
            <el-input
              v-else
              placeholder="请填写商务人员"
              style="width: 240px;"
              v-model="form.businessMember"
            ></el-input>
          </el-form-item>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="登录名"
            prop="logid"
          >
            <el-input
              v-if="actionType === 'create'"
              placeholder="请填写登录名"
              style="width: 240px;"
              v-model="form.logid"
            ></el-input>
            <span v-else> {{ form.logid }} </span>
          </el-form-item>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="登录密码"
            prop="password"
          >
            <span v-if="actionType === 'detail'"> - </span>
            <el-input
              v-else-if="actionType === 'edit'"
              placeholder="点击修改登录密码"
              style="width: 240px;"
              show-password
              v-model="form.password"
            >
            </el-input>
            <el-input
              v-else
              placeholder="请填写登录密码"
              style="width: 240px;"
              show-password
              v-model="form.password"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="确认密码"
            prop="passwordAgain"
          >
            <span v-if="actionType === 'detail'"> - </span>
            <el-input
              v-else
              placeholder="请填写确认密码"
              style="width: 240px;"
              show-password
              v-model="form.passwordAgain"
            ></el-input>
          </el-form-item>
        </div>
        <div class="form_box">
          <div class="box_title">分成信息</div>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="分成有效期"
            prop="lastPayDay"
          >
            <span v-if="actionType === 'detail'">{{ dateFormat(form.lastPayDay) }}</span>
            <el-date-picker
              v-else
              v-model="form.lastPayDay"
              style="width: 240px;"
              type="date"
              :picker-options="pickerOptions"
              clearable
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="结算状态"
            prop="settlementStatus"
          >
            <span v-if="actionType === 'detail'">{{
              form.settlementStatus ? "正常" : "冻结"
            }}</span>
            <el-radio-group v-else v-model="form.settlementStatus">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="2">冻结</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="结算周期"
            prop="settlementCycle"
            class="demo-form-inline"
          >
            <span v-if="actionType === 'detail'">
              <span v-if="form.settlementCycle === 1">每日</span>
              <span v-if="form.settlementCycle === 2">每周 {{ settlementCycleDayName() }}</span>
              <span v-if="form.settlementCycle === 3">每月 {{ settlementCycleDayName() }}</span>
            </span>
            <el-select
              v-else
              v-model="form.settlementCycle"
              @change="settlementCycleOnchange()"
              placeholder="请选择结算周期"
            >
              <el-option
                v-for="item in settlementCycleOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-form-item
              :class="isDetail ? 'detail_item' : ''"
              prop="settlementCycleDay"
              class="demo-form-inline margin0"
              label=""
            >
              <el-select
                style="width:250px"
                v-if="form.settlementCycle === 2 && actionType !== 'detail'"
                v-model="form.settlementCycleDay"
                placeholder="请选择结算周期的具体日期"
              >
                <el-option
                  v-for="item in weekOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-select
                style="width:250px"
                v-if="form.settlementCycle === 3 && actionType !== 'detail'"
                v-model="form.settlementCycleDay"
                placeholder="请选择结算周期的具体日期"
              >
                <el-option
                  v-for="item in monthOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form-item>



          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="充值保护期"
            prop="assistantProtectDay"
          >
            <span v-if="actionType === 'detail'">
              {{ form.assistantProtectDay }} 天
            </span>
            <el-select
              v-else
              v-model="form.assistantProtectDaySelect"
              placeholder="请选择充值保护期"
              @change="assistantChange()"
            >
              <el-option
                v-for="item in APDOpt"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input
              v-if=" form.assistantProtectDaySelect === '*' && actionType !== 'detail'"
              placeholder="请填写天数"
              style="width: 240px;"
              v-model="form.assistantProtectDay"
              @input.native="inputHandle"
            ></el-input>
          </el-form-item>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="分成方案"
            prop="paytype"
          >
            <el-select
              v-if="actionType !== 'detail'"
              v-model="form.schemeid"
              placeholder="请选择分成方案"
              @change="paytypeChange()"
            >
              <el-option
                v-for="item in schemeOption"
                :key="item.id"
                :label="item.schemename"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <span>方案类型：{{ payTypeName() }}</span>
          </el-form-item>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="方案详情"
            prop="schemeDetails"
            v-if="form.paytype"
            required
          >
            <div
              class="schemeList"
              v-for="(s, index) in form.schemeDetails"
              :key="index"
            >
              <el-form-item
                label=""
                :prop="`schemeDetails.${index}.startdays`"
                :rules="rules.startdays"
                class="demo-form-inline"
                v-if="form.paytype === 4 || form.paytype === 2"
              >
                <span>从</span>
                <el-input
                  v-if="actionType !== 'detail'"
                  placeholder="请输入"
                  style="width: 87px;"
                  v-model="s.startdays"
                  @input.native="inputNumberHandle"
                ></el-input>
                <span v-else>{{s.startdays}}</span>
                <span>天</span>
              </el-form-item>
              <el-form-item
                label=""
                class="demo-form-inline"
                :prop="`schemeDetails.${index}.enddays`"
                :rules="rules.enddays"
                v-if="form.paytype === 4 || form.paytype === 2"
              >
                <span>到</span>
                <el-input
                  v-if="actionType !== 'detail'"
                  placeholder="请输入"
                  style="width: 87px;"
                  v-model="s.enddays"
                  @input.native="inputNumberHandle"
                ></el-input>
                <span v-else>{{s.enddays}}</span>
                <span>天</span>
              </el-form-item>
              <el-form-item
                label=""
                :prop="`schemeDetails.${index}.startamount`"
                class="demo-form-inline"
                :rules="rules.startamount"
                v-if="form.paytype === 4 || form.paytype === 3"
              >
                <span>金额在</span>
                <el-input
                  v-if="actionType !== 'detail'"
                  placeholder="请输入金额"
                  style="width: 150px;"
                  v-model="s.startamount"
                  @input.native="inputNumberHandle"
                ></el-input>
                <span v-else>{{s.startamount}}</span>
              </el-form-item>
              <el-form-item
                  label=""
                  :prop="`schemeDetails.${index}.endamount`"
                  class="demo-form-inline"
                  :rules="rules.endamount"
                  v-if="form.paytype === 4 || form.paytype === 3"
                >
                  <span>到</span>
                  <el-input
                  v-if="actionType !== 'detail'"
                    placeholder="请输入金额"
                    style="width: 150px;"
                    v-model="s.endamount"
                    @input.native="inputNumberHandle"
                  ></el-input>
                  <span v-else>{{s.endamount}}</span>
                  <span>之间的</span>
                </el-form-item>
                <el-form-item
                  label=""
                  class="demo-form-inline"
                  :prop="`schemeDetails.${index}.tcpercent`"
                  :rules="rules.tcpercent"
                >
                  <span>提成</span>
                  <el-input
                    v-if="actionType !== 'detail'"
                    placeholder="请输入"
                    style="width: 87px;"
                    v-model="s.tcpercent"
                    @input.native="inputNumberHandle"
                  ></el-input>
                  <span v-else>{{s.tcpercent}}</span>
                  <span>%</span>
                  <span 
                    v-if="actionType !== 'detail'"
                    @click="schemeDetailsClick('add')" class="add_btn small_btn"
                  >+</span>
                  <span
                    v-if="form.schemeDetails.length > 1 && actionType !== 'detail'"
                    @click="schemeDetailsClick('del', index)"
                    class="reduce_btn small_btn"
                  >-</span>
                </el-form-item>
            </div>
            <div style="margin-top:10px; display:inline-block;" v-if="actionType === 'edit' && !firstModify ">
              <el-popover
                trigger="hover"
                popper-class="dark_popover"
              >
                <div class="remark-content">该操作仅对方案详情生效</div>
                <div slot="reference">
                  <el-button
                    style="width: 87px;"
                    type="primary"
                    @click="saveEditScheme()"
                    >保存</el-button
                  >
                </div>
              </el-popover>
            </div>
          </el-form-item>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="备注"
            prop="remark"
          >
            <span v-if="actionType === 'detail'">{{ form.remark }}</span>
            <el-input
              v-else
              style="width:832px;"
              type="textarea"
              placeholder="请填写备注"
              maxlength="150"
              v-model="form.remark"
              show-word-limit
            ></el-input>
          </el-form-item>
        </div>
        <div class="form_box">
          <div class="box_title">结算信息</div>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="收款类型"
            prop="accountType"
          >
            <span v-if="actionType === 'detail'">{{ form.accountType }}</span>
            <el-select
              v-else
              style="width: 240px;"
              v-model="form.accountType"
              :placeholder="'请选择收款类型'"
            >
              <el-option
                v-for="item in accountTypeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="开户银行"
            prop="openBank"
          >
            <span v-if="actionType === 'detail'">{{
              form.openBank || "-"
            }}</span>
            <el-input
              v-else
              placeholder="请填写开户银行"
              style="width: 240px;"
              v-model="form.openBank"
            ></el-input>
          </el-form-item>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="收款账号"
            prop="cardNumber"
          >
            <span v-if="actionType === 'detail'">{{
              form.cardNumber || "-"
            }}</span>
            <el-input
              v-else
              placeholder="请填写收款账号"
              style="width: 240px;"
              v-model="form.cardNumber"
            ></el-input>
          </el-form-item>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="收款人"
            prop="accountName"
          >
            <span v-if="actionType === 'detail'">{{
              form.accountName || "-"
            }}</span>
            <el-input
              v-else
              placeholder="请填写收款人"
              style="width: 240px;" 
              v-model="form.accountName"
            ></el-input>
          </el-form-item>
        </div>
        <div class="form_box">
          <div class="box_title">联系信息</div>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="联系人"
            prop="contactMan"
          >
            <span v-if="actionType === 'detail'">{{
              form.contactMan || "-"
            }}</span>
            <el-input
              v-else
              placeholder="请填写联系人"
              style="width: 240px;"
              v-model="form.contactMan"
            ></el-input>
          </el-form-item>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="电话号码"
            prop="telephone"
          >
            <span v-if="actionType === 'detail'">{{
              form.telephone || "-"
            }}</span>
            <el-input
              v-else
              placeholder="请填写电话号码"
              style="width: 240px;"
              v-model="form.telephone"
            ></el-input>
          </el-form-item>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="手机号码"
            prop="mobile"
          >
            <span v-if="actionType === 'detail'">{{ form.mobile || "-" }}</span>
            <el-input
              v-else
              placeholder="请填写手机号码"
              style="width: 240px;"
              v-model="form.mobile"
            ></el-input>
          </el-form-item>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="QQ/微信"
            prop="qQ_Wechat"
          >
            <span v-if="actionType === 'detail'">{{
              form.qQ_Wechat || "-"
            }}</span>
            <el-input
              v-else
              placeholder="请填写QQ/微信"
              style="width: 240px;"
              v-model="form.qQ_Wechat"
            ></el-input>
          </el-form-item>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="身份证号"
            prop="idCard"
          >
            <span v-if="actionType === 'detail'">{{ form.idCard || "-" }}</span>
            <el-input
              v-else
              placeholder="请填写身份证号"
              style="width: 240px;"
              v-model="form.idCard"
            ></el-input>
          </el-form-item>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="Email"
            prop="email"
          >
            <span v-if="actionType === 'detail'">{{ form.email || "-" }}</span>
            <el-input
              v-else
              placeholder="请填写Email"
              style="width: 240px;"
              v-model="form.email"
            ></el-input>
          </el-form-item>
          <el-form-item
            :class="isDetail ? 'detail_item' : ''"
            label="详细地址"
            prop="address"
          >
            <span v-if="actionType === 'detail'">{{
              form.address || "-"
            }}</span>
            <el-input
              v-else
              placeholder="请填写详细地址"
              style="width: 240px;"
              v-model="form.address"
            ></el-input>
          </el-form-item>
        </div>
        <div style="text-align: center;padding-bottom: 28px;margin-top:60px;">
          <el-button style="width: 87px;" @click="cancel('form')">
            取消
          </el-button>
          <el-button
            v-if="actionType === 'create'"
            style="width: 87px;"
            type="primary"
            @click="createProgram('form')"
            >创建</el-button
          >
          <el-button
            v-else-if="actionType === 'edit' && !firstModify"
            style="width: 87px;"
            type="primary"
            @click="modifyProgram('form')"
            >确认</el-button
          >
          <el-button
            v-else-if="actionType === 'edit' && firstModify"
            style="width: 87px;"
            type="primary"
            @click="firstModifyAgency('form')"
            >确认</el-button
          >
          <!-- <el-button
            v-else
            style="width: 87px;"
            type="primary"
            @click="editItem()"
            >编辑</el-button
          > -->
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
/*
 *@author: liujinming
 *@date: 2021-07-02 14:41:10
 *@description: 推广商详情页面以及的编辑页面
 */
import { getCookie } from "@/utils/auth";
import {
  ProTypeOption,
  SettlementCycleOption,
  PayTypeOpiton,
  AccountTypeOption,
  monthDataOption
} from "./const";
import { getDistribSchemeList, getDetailList } from "@/api/scheme";
import {
  addAssistant,
  getDtoAssistant,
  modifyAssistant,
  modifyScheme,
  firstModifyAgency
} from "@/api/data";
// import func from 'vue-editor-bridge';
import { formatDate } from "@/utils/validate";

export default {
  data() {
    var validpassword = (rule, value, callback) => {
      if (this.actionType === 'create' && !this.firstModify) {
        if (/[ ]/g.test(value)) {
          callback(new Error("密码格式有误，不得包含空格"));
        } else {

          if( value.length > 20 || value.length < 6){
            callback(new Error("密码格式有误"))
          }
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      firstModify:false,
      actionType: "detail",
      isDetail: true,
      RoleName: "",
      id:'',
      form: {
        userName: "",
        isAgency: "",
        allowAssistant: "",
        assistantType: "",
        businessMember: "",
        loginName: "",
        logid: "",
        password: "",
        passwordAgain: "",
        lastPayDay: "",
        settlementStatus: "", //结算状态
        settlementCycle: "", //结算周期
        settlementCycleDay: 0, //结算周期具体天数
        assistantProtectDay: "", //充值保护期
        assistantProtectDaySelect: "",
        schemeid: "", //分成方案id
        paytype: "", //分成方案
        schemeDetails: [
          // 方案详情
          {startdays: "",enddays: "",startamount: "", endamount: "", tcpercent: "" }
        ],
        remark: "",
        accountType: "", //收款类型
        openBank: "", //开户银行
        cardNumber: "", //收款账号
        accountName: "", //收款人
        contactMan: "", //联系人
        telephone: "", //电话号码
        mobile: "", //手机号码
        qQ_Wechat: "", //QQ/weixin
        idCard: "", //身份证号
        email: "", //邮箱
        address: "", //详细地址
        assistantAgencyId:0,  //所属推广商 新增推广商默认0
      },
      rules: {
        userName: [
          { required: true, message: "请输入名称", trigger: "change" }
        ],
        allowAssistant: [
          { required: true, message: "请选择是否继续推广", trigger: "change" }
        ],
        assistantType: [
          { required: true, message: "请选择的类型", trigger: "change" }
        ],
        logid: [
          { required: true, message: "请输入登录名", trigger: "change" }
        ],
        password: [
          { validator: validpassword, trigger: "blur" }
        ],
        passwordAgain: [
          { validator: validpassword, trigger: "blur" }
        ],
        lastPayDay: [
          { required: true, message: "请选择有效期时间", trigger: "change" }
        ],
        settlementStatus: [
          { required: true, message: "请选择结算状态", trigger: "change" }
        ],
        settlementCycle: [
          { required: true, message: "请选择结算周期", trigger: "change" },
        ],
        settlementCycleDay:[
          { required: true, message: "请选择结算周期的具体日期", trigger: "change" },
        ],
        assistantProtectDay: [
          { required: true, message: "请输入充值保护期", trigger: "change" }
        ],
        paytype: [
          { required: true, message: "请选择分成方案", trigger: "change" }
        ],
        startdays: [
          { required: true, message: "请输入开始天数", trigger: "change" }
        ],
        enddays: [
          { required: true, message: "请输入截止天数", trigger: "change" }
        ],
        startamount: [
          { required: true, message: "请输入金额", trigger: "change" }
        ],
        endamount: [
          { required: true, message: "请输入金额", trigger: "change" }
        ],
        tcpercent: [
          { required: true, message: "请输入分成比例", trigger: "change" }
        ],
      },
      proTypeOption: ProTypeOption,
      settlementCycleOption: SettlementCycleOption,
      schemeOption: [],
      payTypeOpiton: PayTypeOpiton,
      accountTypeOption: AccountTypeOption,
      weekOption:[
        {value: 0,label: "周日"},
        {value: 1,label: "周一"},
        {value: 2,label: "周二"},
        {value: 3,label: "周三"},
        {value: 4,label: "周四"},
        {value: 5,label: "周五"},
        {value: 6,label: "周六"},
      ],
      monthOption:monthDataOption,
      APDOpt: [
        {value: "7",label: "7天"},
        {value: "*",label: "自定义"}
      ],
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() <= new Date(new Date().getTime()-86400000);
        }
      }
    };
  },
  created() {
    this.actionType = this.$route.query.type;
    switch (getCookie("roleType")) {
      case "1":
        this.RoleName = "推广员";
        break;
      case "3":
        this.RoleName = "推广商";
        break;
    }
    this.getListDto();
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getDetailInfo();
    }
    if (this.RoleName === "推广商") {
      this.form.allowAssistant === false;
      this.form.isAgency = false;
    } else {
      this.form.isAgency = true;
    }
  },
  computed: {
    dateFormat(){
      return function(date){
        if(date){
          return formatDate(new Date(date),'yyyy-MM-dd')
        }
      }
    },
    payTypeName: () => {
      return function() {
        var row = this.payTypeOpiton.filter(item => {
          if (item.value === this.form.paytype) {
            return item;
          }
        });
        if (row.length) {
          return row[0].label;
        }
      };
    },
    settlementCycleDayName: () => {
      return function(){
        let row = '';
        if(this.form.settlementCycle === 2){
          row = this.weekOption.filter((item)=>{
            if(item.value === this.form.settlementCycleDay){
              return item;
            }
          })
        }else{
          row = this.monthOption.filter((item)=>{
            if(item.value === this.form.settlementCycleDay){
              return item;
            }
          })
        }
        return row[0].label
      }
    }
  },
  methods: {
    switchStatus() {
      this.isDetail = false;
    },
    // 返回
    back() {
      this.$router.back();
    },
    settlementCycleOnchange(){
      // console.log(this.form.settlementCycle)
      if(this.form.settlementCycle === 1){
        this.form.settlementCycleDay = 0;
      }else{
        this.form.settlementCycleDay = '';        
      }
    },
    cancel() {
      this.$router.back();
    },
    schemeDetailsClick(type, index) {
      if (type === "add") {
        this.form.schemeDetails.push({startdays: "",enddays: "",startamount: "", endamount: "", tcpercent: "" });
      } else if (type === "del") {
        this.form.schemeDetails.splice(index, 1);
      }
    },
    inputHandle({target}){
      this.form.assistantProtectDay = target.value.replace(/[^\d]/g,'');
      if(target.value < 0 ){
        this.form.assistantProtectDay = 0;
      }
      if(target.value > 365 ){
        this.form.assistantProtectDay = 365;
      }
    },
    inputNumberHandle({target}){
      target.value = target.value.replace(/[^\d]/g,'');
    },
    // 创建推广员
    createProgram() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.lastPayDay = this.form.lastPayDay?new Date(this.form.lastPayDay).getTime():'';
          this.form.lsettlementCycleDay = this.form.settlementCycleDay || 0;
          addAssistant(this.form)
            .then(response => {
              if (response.code === 0) {
                this.$message({
                  message: "添加成功",
                  type: "success"
                });
                this.$router.back();
              } else {
                this.$message.error(response.message);
              }
            })
            .catch(error => {
              this.$message(error);
            });
        }
      });
    },
    // 首次修改运营后台导入的推广商
    firstModifyAgency(){
      this.$refs.form.validate(valid => {
        if (valid) {
          var data = {
            userName:this.form.userName,
            allowAssistant: this.form.allowAssistant,
            assistantType: this.form.assistantType,
            lastPayDay: this.form.lastPayDay?new Date(this.form.lastPayDay).getTime():'',
            settlementStatus: this.form.settlementStatus,
            settlementCycle: this.form.settlementCycle,
            settlementCycleDay: this.form.settlementCycleDay || 0,
            assistantProtectDay: this.form.assistantProtectDay,
            assistantStatus: 1,
            payType:this.form.payType,
            password:this.form.password,
            accountType: this.form.accountType,
            openBank: this.form.openBank,
            cardNumber: this.form.cardNumber,
            accountName: this.form.accountName,
            contactMan: this.form.contactMan,
            mobile: this.form.mobile,
            telephone: this.form.telephone,
            qQ_Wechat: this.form.qQ_Wechat,
            idCard: this.form.idCard,
            email: this.form.email,
            address: this.form.address,
            businessMember: this.form.businessMember,
            assistantAgencyId:this.form.assistantAgencyId,
            remark: this.form.remark,
            paytype: this.form.paytype,
            schemeDetails:this.form.schemeDetails,
            id: this.$route.query.id,
          };
          firstModifyAgency(data)
            .then(response => {
              if (response.code === 0) {
                this.$message({
                  message: "信息修改成功",
                  type: "success"
                });
                this.$router.back();
              } else {
                this.$message.error(response.message);
              }
            })
            .catch(error => {
              this.$message(error);
            });
        }
      });
    },
    // 修改推广员/推广商
    modifyProgram() {
      this.$refs.form.validate(valid => {
        if (valid) {
          var data = {
            userName:this.form.userName,
            allowAssistant: this.form.allowAssistant,
            assistantType: this.form.assistantType,
            lastPayDay: this.form.lastPayDay?new Date(this.form.lastPayDay).getTime():'',
            settlementStatus: this.form.settlementStatus,
            settlementCycle: this.form.settlementCycle,
            settlementCycleDay: this.form.settlementCycleDay || 0,
            assistantProtectDay: this.form.assistantProtectDay,
            assistantStatus: 1,
            accountType: this.form.accountType,
            openBank: this.form.openBank,
            cardNumber: this.form.cardNumber,
            accountName: this.form.accountName,
            contactMan: this.form.contactMan,
            mobile: this.form.mobile,
            telephone: this.form.telephone,
            qQ_Wechat: this.form.qQ_Wechat,
            idCard: this.form.idCard,
            email: this.form.email,
            address: this.form.address,
            businessMember: this.form.businessMember,
            remark: this.form.remark,
            id: this.$route.query.id,
            password:this.form.password,
          };
          modifyAssistant(data)
            .then(response => {
              if (response.code === 0) {
                this.$message({
                  message: "信息修改成功",
                  type: "success"
                });
                this.$router.back();
              } else {
                this.$message.error(response.message);
              }
            })
            .catch(error => {
              this.$message(error);
            });
        }
      });
    },
    // 编辑代理商
    editItem() {
      this.actionType = "edit";
    },
    // 获取分成方案
    getListDto() {
      var that = this;
      getDistribSchemeList()
        .then(response => {
          that.schemeOption = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 获取详情
    getDetailInfo() {
      getDtoAssistant({ id: this.$route.query.id }).then(res => {
        if(res.code !== 0){
          this.$message.error(res.message);
          return
        }
        if (res.data.assistantProtectDay === 7) {
          this.form.assistantProtectDaySelect = "7";
        } else {
          this.form.assistantProtectDaySelect = "*";
        }
        this.firstModify = res.data.paytype ? false : true;
        this.form.assistantProtectDay = res.data.assistantprotectday;
        this.form.userName = res.data.username;
        this.form.allowAssistant = res.data.allowassistant;
        this.form.assistantType = res.data.assistanttype;
        this.form.businessMember = res.data.businessmember;
        this.form.loginName = res.data.loginname;
        this.form.logid = res.data.logid;
        this.form.password = res.data.password;
        this.form.passwordAgain = res.data.password;
        this.form.lastPayDay = res.data.lastpayday;
        this.form.settlementStatus = res.data.settlementstatus;
        this.form.settlementCycle = res.data.settlementcycle;
        this.form.settlementCycleDay = res.data.settlementcycleday;
        this.form.paytype = res.data.paytype;
        this.form.schemeDetails = res.data.schemedetails;
        this.form.remark = res.data.remark;
        this.form.openBank = res.data.openbank;
        this.form.cardNumber = res.data.cardnumber;
        this.form.accountName = res.data.accountname;
        this.form.contactMan = res.data.contactman;
        this.form.telephone = res.data.telephone;
        this.form.mobile = res.data.mobile;
        this.form.qQ_Wechat = res.data.qq_wechat;
        this.form.idCard = res.data.idcard;
        this.form.email = res.data.email;
        this.form.address = res.data.address;
      });
    },
    // 根据分成方案获取详情
    paytypeChange() {
      if (!this.form.schemeid) {
        this.form.paytype = "";
        this.form.schemeDetails = [
          { startamount: "", endamount: "", tcpercent: "" }
        ];
        return;
      }
      this.form.paytype = this.schemeOption.filter(item => {
        if (item.id === this.form.schemeid) {
          return item;
        }
      })[0].paytype;
      getDetailList({ id: this.form.schemeid })
        .then(response => {
          this.form.schemeDetails = response.data;
        })
        .catch(error => {});
    },
    assistantChange() {
      if (this.form.assistantProtectDaySelect === "7") {
        this.form.assistantProtectDay = this.form.assistantProtectDaySelect;
      } else {
        this.form.assistantProtectDay = "";
      }
    },
    saveEditScheme() {
      var data = {
        id: this.$route.query.id,
        payType: this.form.paytype,
        details: this.form.schemeDetails
      };
      modifyScheme(data).then(res => {
        this.$message({
          message: "修改成功",
          type: "success"
        });
      });
    },
    cancelScheme() {
      this.form.schemeDetails = [
        { startamount: "", endamount: "", tcpercent: "" }
      ];
    }
  }
};
</script>

<style lang="scss" scoped>
.manage_detail {
  .lander_detail_back .icon {
    width: 24px;
    height: 24px;
    vertical-align: top;
    margin-right: 10px;
    cursor: pointer;
  }
  .top_treadcrumb {
    font-family: PingFangSC-Semibold;
    font-size: 18px;
    color: #141414;
    letter-spacing: 0;
    line-height: 24px;
    font-weight: 600;
  }
  .manage_detail_content {
    background: #ffffff;
    box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.09);
    border-radius: 4px;
    padding: 28px 0 0 0;
    margin: 0 0 16px 0;
    margin-top: 21px;
    .form_box {
      padding: 0 32px 22px;
      border-bottom: 1px solid #dbdbdb;
      margin-bottom: 32px;
      .box_title {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #0d0d0d;
        letter-spacing: 0;
        line-height: 18px;
        border-left: 4px solid var(--themeColor);
        padding-left: 8px;
        margin-bottom: 16px;
        font-weight: 600;
      }
      // .detail_item {
      // margin-bottom: 0px;
      // }
    }
  }
  .icon-btn {
    color: var(--themeColor);
    margin: 0 10px;
    cursor: pointer;
  }
  .icon-btn-close {
    color: #979797;
    cursor: pointer;
  }
  .small_btn {
    width: 14px;
    height: 14px;
    color: #fff;
    box-sizing: border-box;
    line-height: 14px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
  }
  .add_btn {
    background: var(--themeColor);
    margin: 0 16px;
  }
  .reduce_btn {
    background: var(--themeColor);
  }
  .demo-form-inline{
    margin-bottom: 20px;
    display: inline-block;
  }
  .margin0{
    margin: 0;
  }
}
</style>
